<header class="page-title-bar">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active">
        <a href="#!">
          <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>Tables</a>
      </li>
    </ol>
  </nav>
  <button type="button" class="btn btn-success btn-floated">
    <span class="fa fa-plus"></span>
  </button>
  <div class="d-md-flex align-items-md-start">
    <h1 class="page-title mr-sm-auto">Filter Columns</h1>
    <div id="dt-buttons" class="btn-toolbar"></div>
  </div>
</header>
<div class="page-section">
  <section class="card card-fluid">
    <header class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link active show" data-toggle="tab" href="#tab1"><?php echo l('status.-1');?></a></li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#tab2"><?php echo l('status.1');?></a></li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#tab3"><?php echo l('status.0');?></a></li>
      </ul>
    </header>
    <div class="card-body">
      <div class="form-group">
        <div class="input-group input-group-alt">
          <div class="input-group has-clearable">
            <button id="clear-search" type="button" class="close" aria-label="Close">
              <span aria-hidden="true">
                <i class="fa fa-times-circle"></i>
              </span>
            </button>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <span class="oi oi-magnifying-glass"></span>
              </span>
            </div>
            <input id="table-search" type="text" class="form-control" placeholder="Search products"></div>
          <div class="input-group-append">
            <button class="btn btn-secondary" data-toggle="modal" data-target="#modalFilterColumns">Filter Columns</button></div>
        </div>
      </div>
      <div class="modal fade" id="modalFilterColumns" tabindex="-1" role="dialog" aria-labelledby="modalFilterColumnsLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-overflow" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalFilterColumnsLabel">Filter Columns</h5></div>
            <div class="modal-body">
              <div id="filter-columns">
                <div class="form-group form-row filter-row">
                  <div class="col">
                    <select class="custom-select filter-control filter-column">
                      <option value="1">Name</option>
                      <option value="2">Inventory</option>
                      <option value="3">Variants</option>
                      <option value="4">Prices</option>
                      <option value="5">Sales</option></select>
                  </div>
                  <div class="col">
                    <select class="custom-select filter-control filter-operator">
                      <option value="contain">Contain</option>
                      <option value="notcontain">Not Contain</option>
                      <option value="equal">Equal to</option>
                      <option value="notequal">Not equal to</option>
                      <option value="beginwith">Begin with</option>
                      <option value="endwith">End with</option>
                      <option value="greaterthan">Greater than</option>
                      <option value="lessthan">Less than</option></select>
                  </div>
                  <div class="col">
                    <div class="input-group input-group-alt">
                      <input type="text" class="form-control filter-control filter-value rounded mr-2">
                      <div class="input-group-append">
                        <button class="close remove-filter-row">×</button></div>
                    </div>
                  </div>
                </div>
                <div class="form-group form-row filter-row">
                  <div class="col">
                    <select class="custom-select filter-control filter-column">
                      <option value="1">Name</option>
                      <option value="2">Inventory</option>
                      <option value="3">Variants</option>
                      <option value="4">Prices</option>
                      <option value="5">Sales</option></select>
                  </div>
                  <div class="col">
                    <select class="custom-select filter-control filter-operator">
                      <option value="contain">Contain</option>
                      <option value="notcontain">Not Contain</option>
                      <option value="equal">Equal to</option>
                      <option value="notequal">Not equal to</option>
                      <option value="beginwith">Begin with</option>
                      <option value="endwith">End with</option>
                      <option value="greaterthan">Greater than</option>
                      <option value="lessthan">Less than</option></select>
                  </div>
                  <div class="col">
                    <div class="input-group input-group-alt">
                      <input type="text" class="form-control filter-control filter-value rounded mr-2">
                      <div class="input-group-append">
                        <button class="close remove-filter-row">×</button></div>
                    </div>
                  </div>
                </div>
              </div>
              <button id="add-filter-row" class="btn btn-reset my-2">
                <i class="fa fa-plus mr-1"></i>add filter</button>
            </div>
            <div class="modal-footer justify-content-start">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Apply filters</button>
              <button type="button" class="btn btn-light" id="clear-filter">Cancel</button></div>
          </div>
        </div>
      </div>
      <table id="myTable" class="table"><thead></thead></table>
    </div>
  </section>
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.bootstrap4.min.css">

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.print.min.js"></script>

<script src="/assets/javascript/pages/datatables-filters.min.js"></script>
<?php require __DIR__.'/modal.phtml';?>